<template>
  <div class="todo-list">
    <h1>待办事项列表</h1>
    <input v-model="newTodoText" placeholder="添加新的待办事项" />
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <TodoItem :todo="todo" @toggle-completion="toggleCompletion" @remove-todo="removeTodo" />
      </li>
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  data() {
    return {
      newTodoText: '',
      todos: [],
      nextTodoId: 1
    };
  },
  methods: {
    addTodo() {
      if (this.newTodoText.trim()) {
        this.todos.push({
          id: this.nextTodoId++,
          text: this.newTodoText,
          completed: false
        });
        this.newTodoText = '';
      }
    },
    toggleCompletion(todoId) {
      const todo = this.todos.find(todo => todo.id === todoId);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    removeTodo(todoId) {
      this.todos = this.todos.filter(todo => todo.id !== todoId);
    }
  }
}
</script>

<style scoped>
.todo-list {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
input {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}
button {
  padding: 10px 20px;
  display: block;
  margin: 0 auto;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
}
</style>